<template>
  <view>
    <view
      v-if="version.isPersonal == 'Y'"
      class="notice"
    >
      <view class="content">
        你正在使用个人体验版，如需正式使用，请联系管理员
      </view>
      <view
        class="btn"
        @click="contact"
      >
        联系管理员
      </view>
    </view>
    <view class="team">
      <view class="mock" />
      <view class="team-head">
        <search-bar
          :show-btn="false"
          disabled
        />
        <view
          v-if="t_menuList.length"
          class="menu1"
        >
          <view class="left">
            <view class="l_top">
              <view
                v-for="(item, index) in t_menuList"
                :key="index"
                class="l_top-item"
                :style="
                  'background: url(' +
                    item.logoUrl +
                    ') no-repeat center;background-size: 220rpx 138rpx;'
                "
                @click="menuClick(item, index)"
              >
                <view class="name">
                  {{ item.name }}
                </view>
                <view class="tips">
                  {{ item.tips }}
                </view>
              </view>
            </view>
            <view class="l_down">
              <view
                v-for="(item, index) in d_menuList"
                :key="index"
                class="l_down-item"
                @click="menuClick(item, index)"
              >
                <image
                  :src="item.logoUrl"
                  mode="aspectFill"
                  class="icon"
                />
                <view class="txt">
                  {{ item.name }}
                </view>
              </view>
            </view>
          </view>
          <view class="right">
            <view
              class="r_li"
              style="margin-bottom: 10rpx"
              @click="menuClick(r_menuList[0], 0)"
            >
              <image
                :src="r_menuList[0].logoUrl"
                mode="aspectFill"
              />
            </view>
            <view
              class="r_li"
              @click="menuClick(r_menuList[1], 1)"
            >
              <image
                :src="r_menuList[1].logoUrl"
                mode="aspectFill"
              />
            </view>
          </view>
        </view>
        <!-- <view class="menu" v-if="menu1List.length"> -->
        <!-- <view -->
        <!-- v-for="(item, index) in menuList" -->
        <!-- :key="index" -->
        <!-- class="menu-item" -->
        <!-- @click="menuClick(item, index)" -->
        <!-- > -->
        <view :class="['icon', item.class]" />
        <!-- <image :src="item.logoUrl" mode="aspectFill" class="icon" /> -->
        <!-- <view class="txt"> -->
        <!-- {{ item.name }} -->
        <!-- </view> -->
        <!-- </view> -->
        <!-- </view> -->
        <view class="label">
          <my-banner
            :img-list="imgList"
            @click="clickImg"
          />
        </view>
        <view class="top">
          <view class="top-title">
            必玩TOP3
          </view>
          <view class="top-info">
            <view
              class="top-info-left"
              @click="jumpProduct(top1[0])"
            >
              <view class="top-info-left-wrap">
                <view
                  v-show="top1[0].productName"
                  class="top-info-item top-info-title1"
                >
                  {{ top1[0].productName || '' }}
                </view>
                <view
                  v-show="top1[0].price"
                  class="top-info-item top-info-price"
                >
                  {{ top1[0].price || '' }}
                </view>
              </view>
              <image
                :src="top1[0].imgUrl"
                class="top-info-left"
                mode="aspectFill"
              />
            </view>
            <view class="top-info-right">
              <view
                class="top2"
                @click="jumpProduct(top2[0])"
              >
                <view class="top-info-left-wrap">
                  <view
                    v-show="top2[0].productName"
                    class="top-info-item top-info-title"
                  >
                    {{ top2[0].productName || '' }}
                  </view>
                  <view
                    v-show="top2[0].price"
                    class="top-info-item top-info-price"
                  >
                    {{ top2[0].price || '' }}
                  </view>
                </view>
                <image
                  :src="top2[0].imgUrl"
                  class="first"
                  mode="aspectFill"
                />
              </view>
              <view
                class="top3"
                @click="jumpProduct(top3[0])"
              >
                <view class="top-info-left-wrap">
                  <view
                    v-show="top3[0].productName"
                    class="top-info-item top-info-title"
                  >
                    {{ top3[0].productName || '' }}
                  </view>
                  <view
                    v-show="top3[0].price"
                    class="top-info-item top-info-price"
                  >
                    {{ top3[0].price || '' }}
                  </view>
                </view>
                <image
                  :src="top3[0].imgUrl"
                  class="second"
                  mode="aspectFill"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="recommend">
        <my-tablist
          :category-list="categoryList"
          @change="changeTab"
        />
        <view class="waterfall">
          <my-waterfall :list="list" />
          <view
            v-if="!list.length"
            class="none"
          >
            努力装修中，敬请期待
          </view>
        </view>
        <!-- <feng-flow ref="wfalls" :list="list" /> -->
      </view>
    </view>
  </view>
</template>

<script>
import searchBar from '@/components/search-bar/index.vue'
import myWaterfall from '@/components/my-waterfall/index.vue'
import myTablist from '@/components/my-tablist/index.vue'
import myBanner from '@/components/my-banner/index.vue'
import { contactAdminToUseApp } from 'dingtalk-design-libs'

export default {
  components: {
    myWaterfall,
    searchBar,
    myTablist,
    myBanner
  },
  data() {
    return {
      version: {
        isPersonal: 'N',
        mainCorpId: ''
      },
      list: [],
      currCity: '',
      page: {
        page_size: 10,
        current_page: 1,
        count: 0,
        loading: false,
        finished: false
      },
      d_menuList: [],
      t_menuList: [],
      r_menuList: [],
      menu1List: [],
      top1: [],
      top2: [],
      top3: [],
      categoryList: [],
      codeList: '',
      imgList: []
    }
  },
  onReachBottom() {
    if (this.list.length && this.list.length < this.page.count) {
      this.queryData()
    }
  },
  onLoad() {
    this.getUserLocation()
    this.getMenuList()
    this.getCategoryList()
    this.checkIsPersonal()
    this.getBanerList()
  },
  onReady() {
    this.queryData()
  },
  onShow() {
    // this.list = [];
    // this.page.current_page = 1;
    // this.queryData();
    // console.log('team onshow', this.$store.state.storeCity)
    const val = this.$store.state.storeCity
    if (val && val !== this.currCity) {
      this.currCity = val
      this.$store.commit('changeStoreCity', val)
    }
  },
  onPullDownRefresh() {
    this.list = []
    this.page.current_page = 1
    this.queryData('refresh')
    this.getMenuList()
    this.getCategoryList()
  },
  methods: {
    checkIsPersonal() {
      this.$ajax({
        method: 'post',
        url: '/outing/mobile/dingtalk/checkIsPersonal',
        data: {
          corpId: dd.corpId
        }
      }).then((res) => {
        console.log(res)
        if (res.data) {
          this.version = {
            isPersonal: res.data.isPersonal,
            mainCorpId: res.data.mainCorpId
          }
        }
      })
    },
    search(data) {
      console.log('搜索data', data)
      const { city, inputValue } = data
      this.$jumpUrl(`/productPages/team/list?name=${inputValue}&city=${city}`)
    },
    // 列表获取
    queryData(status) {
      uni.showLoading({
        title: '加载中'
      })
      this.page.loading = true
      this.$ajax({
        method: 'get',
        url: '/outing/mobile/goods/search',
        data: {
          hot: 'Y',
          // address: this.currCity,
          codeList: this.codeList,
          ...this.page
        }
      })
        .then((res) => {
          res.data.forEach((t) => {
            t.tagList = t.tag ? JSON.parse(t.tag) : []
            if (t.price && t.price > 10000) {
              t.price = (t.price / 1000).toString().slice(0, 4) + '万+'
            }
            if (t.sellNumber && t.sellNumber > 10000) {
              t.sellNumber =
                (t.sellNumber / 1000).toString().slice(0, 4) + '万+'
            }
          })
          this.list.push.apply(this.list, res.data)
          this.page.count = res.count
          this.page.loading = false
          if (this.list.length >= this.page.count) {
            this.page.finished = true
          }
          uni.hideLoading()
          this.page.current_page += 1
          if (status === 'refresh') {
            uni.stopPullDownRefresh()
          }
        })
        .catch(() => {
          uni.hideLoading()
        })
    },
    getMenuList() {
      this.$ajax({
        method: 'get',
        url: '/outing/mobile/product/ioc/findAll'
      }).then((res) => {
        if (res.data) {
          let datas = res.data,
            t_menuList = [],
            r_menuList = []
          this.d_menuList = datas.slice(2, 8)
          t_menuList = datas.slice(0, 1)
          t_menuList[0]['tips'] = ''
          t_menuList.push({
            name: '深度定制',
            tips: '',
            path: 'index',
            logoUrl:
              'https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/index/menu/sddz.png',
            id: 9
          })
          r_menuList.push(datas.slice(1, 2)[0])
          r_menuList.push({
            name: '快乐卷福利卷',
            logoUrl:
              'https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/index/menu/klj.png',
            id: 10
          })
          this.t_menuList = t_menuList
          this.r_menuList = r_menuList
          // this.menuList = res.data.slice();
        }
      })
    },
    jumpProduct(item) {
      console.log('点击图片',item)
      // this.$jumpUrl(`/productPages/team/productDetail?id=${item.productId}`)
      if (item.type === 'BUILD') {
        this.$jumpUrl(`/productPages/team/productDetail?id=${item.productId}`)
      } else if (item.type === 'ROUTE') {
        this.$jumpUrl(`/productPages/route/detail?id=${item.productId}`)
      }
    },
    getUserLocation() {
      // 获取定位
      dd.getLocation({
        type: 1,
        success: (res) => {
          const { longitude, latitude } = res
          const location = [latitude, longitude]
          let city = res.city.replace('市', '')
          city = city.replace('县', '')
          console.log('首页定位成功', res, city)
          this.currCity = city
          this.$store.commit('changeStoreCity', city)
          this.$store.commit('changeStoreLocation', location)
        },
        fail(e) {
          uni.showToast({
            title: '定位失败，请尝试开启定位权限'
          })
        }
      })
    },
    menuClick(item, index) {
      console.log('点击的菜单', item)
      if (item.id === 8) {
        this.$jumpUrl(
          `/subPages/travel/index?category=${item.subStr}&cateId=${item.id}&title=${item.name}`
        )
      } else if (item.id === 9) {
        this.$jumpUrl('/subPages/customize/index')
      } else if (item.id === 10) {
        this.$jumpUrl('/subPages/couponIntro/index')
      } else {
        this.$jumpUrl(
          `/subPages/teamHome/index?&cateId=${item.id}&title=${item.name}`
        )
      }
    },
    changeTab(item) {
      console.log('changeTab', item)
      this.list = []
      this.page.current_page = 1
      if (item.code) {
        this.codeList = item.code
      } else {
        this.codeList = ''
      }
      this.queryData()
    },
    getCategoryList() {
      this.$ajax({
        method: 'get',
        url: '/outing/mobile/category/listAll'
      }).then((res) => {
        if (res.data) {
          this.categoryList = res.data
        }
      })
    },
    clickImg(item) {
      console.log('clickImg', item)
      if (item.type === 'BUILD') {
        this.$jumpUrl(`/productPages/team/productDetail?id=${item.productId}`)
      } else if (item.type === 'ROUTE') {
        this.$jumpUrl(`/productPages/route/detail?id=${item.productId}`)
      } else if (item.type === 'info') {
        this.$jumpUrl('/subPages/couponIntro/index')
      }
    },

    contact() {
      const mainCorpId = this.version.mainCorpId // 后端返回的值
      contactAdminToUseApp({ id: '73551', corpId: mainCorpId }).catch((err) => {
        // 入参不正确，或者遇到技术异常时才会进入这个链路
        console.error('联系管理员err', err)
      })
    },
    getBanerList() {
      this.$ajax({
        method: 'get',
        url: '/outing/mobile/banner/queryAllList'
      }).then((res) => {
        if (res.data) {
          res.data.map((item) => {
            if (item.popLocation === '1') {
              item.url = item.imgUrl
              this.imgList.push(item)
            } else if (item.popLocation === '3') {
              this.top1.push(item)
            } else if (item.popLocation === '4') {
              this.top2.push(item)
            } else if (item.popLocation === '5') {
              this.top3.push(item)
            }
          })
        }
        console.log(this.top1)
      })
    }
  }
}
</script>


<style lang="less" scoped>
.popup-content {
  width: 100%;
  text-align: left;
}

.notice {
  width: 100%;
  height: 128rpx;
  padding: 40rpx 32rpx;
  display: flex;
  align-items: center;
  background: #ffe03466;
  .content {
    font-family: PingFang SC;
    font-size: 28rpx;
    line-height: 36rpx;
    font-weight: 500;
    color: #ffd402;
  }
  .btn {
    width: 220rpx;
    height: 56rpx;
    color: #fff;
    background: #ffd402;
    margin-left: 10rpx;
    text-align: center;
    border-radius: 10rpx;
    line-height: 56rpx;
    padding: 0 10rpx;
  }
}

.team {
  overflow: hidden;
  padding: 20rpx 30rpx;
  background: #f7f9fb;
  min-height: 100vh;
  position: relative;

  .mock {
    width: 100%;
    height: 260rpx;
    position: absolute;
    left: 0;
    top: -20rpx;
    background-image: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
    z-index: 1;
  }

  .team-head {
    z-index: 2;
    position: inherit;
  }

  .search {
    &-title {
      width: 690rpx;
      height: 70rpx;
      background: #ffffff;
      border-radius: 35rpx;
      overflow: hidden;
      border: 2rpx solid #fe7d15;
      display: flex;
      position: relative;

      .city {
        width: 200rpx;
        height: 70rpx;
        color: #ffffff;
        font-size: 28rpx;
        font-weight: 600;
        display: flex;
        align-items: center;
        background: linear-gradient(138deg, #f78833 0%, #fdbc6e 100%);
        border-radius: 35rpx 0px 0px 35rpx;

        .loc {
          margin: 0 14rpx 0 40rpx;
          width: 23rpx;
          height: 30rpx;
        }
      }

      .search-input {
        flex: 1;
        padding: 0 20rpx;
        height: 100%;
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
        text-align: center;
      }

      .other-search {
        width: 25rpx;
        height: 25rpx;
        position: absolute;
        top: 50%;
        margin-top: -12rpx;
        right: 20rpx;
      }
    }

    &-history {
      margin: 20rpx 0;

      text {
        display: inline-block;
        height: 44rpx;
        line-height: 44rpx;
        padding: 0 15rpx;
        font-size: 22rpx;
        color: #555;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 100rpx;
        margin: 0 15rpx 15rpx 0;
      }
    }
  }
  .menu1 {
    display: flex;
    justify-content: space-between;
    padding: 40rpx 0 30rpx;
    .left {
      width: 450rpx;
      .l_top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;
        &-item {
          width: 220rpx;
          height: 138rpx;
          padding: 20rpx 10rpx;
          .name {
            font-size: 26rpx;
            line-height: 37rpx;
            color: #333333;
          }
          .tips {
            font-size: 20rpx;
            color: #b88b57;
            line-height: 30rpx;
          }
        }
      }
      .l_down {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: #efefef;
        border-radius: 20rpx;
        padding: 12rpx 10rpx 11rpx;

        &-item {
          width: 33%;
          text-align: center;
          margin-bottom: 4rpx;
          .icon {
            width: 84rpx;
            height: 84rpx;
          }

          .txt {
            font-size: 24rpx;
            font-weight: 500;
            margin-top: 4rpx;
            line-height: 33rpx;
            color: #555555;
            overflow: hidden;
            // text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .right {
      .r_li {
        width: 230rpx;
        height: 207rpx;
        image {
          display: block;
          width: 230rpx;
          height: 207rpx;
        }
      }
    }
  }

  .label {
    // background: #d8d8d8;
    border-radius: 20rpx;
    margin-bottom: 40rpx;
    overflow: hidden;

    .img {
      width: 690rpx;
      height: 170rpx;
      border-radius: 20rpx;
    }
  }

  .top {
    margin-bottom: 40rpx;

    .bw-img {
      width: 325rpx;
      height: 255rpx;
      margin: 121rpx 10rpx 10rpx 10rpx;
      border-radius: 20rpx;
      position: absolute;
      left: 30rpx;
    }

    &-title {
      font-size: 34rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 20rpx;
    }

    &-info {
      width: 690rpx;
      height: 386rpx;
      border-radius: 20rpx;
      overflow: hidden;
      display: flex;
      justify-content: space-around;
      .top-info-left-wrap {
        position: absolute;
        left: 20rpx;
        top: 20rpx;
        z-index: 1;
        width: 300rpx;
      }
      .top-info-item {
        color: white;
        font-family: PingFangSC-Medium;
        // // white-space: nowrap;
        // // overflow-wrap: break-word;
        // position: absolute;
        // left: 20rpx;
        // z-index: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;   //最多显示两行
        -webkit-box-orient: vertical;
      }
      .top-info-title1 {
        font-size: 30rpx;
        line-height: 42rpx;
        // top: 20rpx;
      }
      .top-info-title {
        font-size: 30rpx;
        line-height: 42rpx;
        // top: 20rpx;
        &:before {
          content: '定制·';
        }
      }
      .top-info-price {
        font-size: 24rpx;
        line-height: 33rpx;
        // top: 70rpx;
        &:before {
          content: '￥';
        }
        &::after {
          content: '限时折扣';
          font-size: 18rpx;
          font-weight: 400;
          margin-left: 5rpx;
        }
      }

      &-left {
        width: 345rpx;
        height: 386rpx;
        margin-right: 10px;
        background: skyblue;
        border-radius: 20rpx;
        position: relative;
      }

      &-right {
        flex: 1;

        .top2 {
          position: relative;
        }

        .top3 {
          position: relative;
        }

        .first {
          width: 334rpx;
          height: 188rpx;
          margin-bottom: 10rpx;
          border-radius: 20rpx 20rpx 0 0;
          // padding: 10px;
          // font-weight: 500;
          // color: #FFFFFF;
        }

        .second {
          width: 334rpx;
          height: 188rpx;
          border-radius: 0 0 20rpx 11rpx;
          // padding: 10px;
          // font-weight: 500;
          // color: #FFFFFF;
        }

        // view {
        // 	height: 188rpx;
        // 	// background: salmon;
        // 	background: linear-gradient(90deg, #436791 0%, rgba(67, 103, 145, 0.2) 100%);
        // }
      }
    }
  }

  .recommend {
    &-title {
      font-size: 34rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 20rpx;
    }

    .none {
      padding: 100upx 30upx;
      text-align: center;
    }

    .list {
      width: 335rpx;

      li {
        background: #fff;
        overflow: hidden;
        border-radius: 20rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;

        .img {
          border-radius: 10rpx 10rpx 0px 0px;
          width: 295rpx;
          height: 260rpx;
        }

        h1 {
          font-weight: 600;
          margin: 10rpx 0;
          line-height: 40rpx;
        }

        .tabList {
          overflow: hidden;
          margin-bottom: 14rpx;

          .item {
            display: inline-block;
            margin: 0 10rpx 10rpx 0;
            padding: 6rpx 14rpx;
            background: #fef2e7;
            border-radius: 4rpx;
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #fe7d15;
          }
        }

        .flex {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
        }
      }
    }

    .waterfall {
      height: 100vh;
    }
  }
}
</style>

